<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>客户端 - 协议详情</title>
    <script src="https://cdn.tailwindcss.com"></script>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
    <style>
        body {
            max-width: 414px;
            margin: 0 auto;
            background: #f5f5f5;
        }
    </style>
</head>
<body class="bg-gray-50">
    <!-- 导航栏 -->
    <nav class="bg-white shadow-sm px-4 py-3 flex items-center justify-between">
        <i class="fas fa-arrow-left text-gray-600 text-xl"></i>
        <div class="text-lg font-semibold text-gray-800">协议详情</div>
        <i class="fas fa-download text-gray-600 text-xl"></i>
    </nav>

    <div class="pb-32">
        <!-- 协议基本信息 -->
        <div class="bg-white rounded-lg mx-4 mt-4 p-4 shadow-sm">
            <div class="flex items-center justify-between mb-3">
                <span class="text-sm text-gray-600">协议编号</span>
                <div class="flex items-center space-x-2">
                    <span class="text-sm text-gray-800 font-medium">AG20240117001</span>
                    <i class="fas fa-copy text-[#6366f1]"></i>
                </div>
            </div>
            <div class="flex items-center justify-between mb-3">
                <span class="text-sm text-gray-600">关联需求：</span>
                <span class="text-sm text-[#6366f1] font-medium">系统功能优化需求</span>
            </div>
            <div class="flex items-center justify-between mb-3">
                <span class="text-sm text-gray-600">关联报价：</span>
                <span class="text-sm text-[#6366f1] font-medium">QT20240116001 (¥15,000)</span>
            </div>
            <div class="flex items-center justify-between mb-3">
                <span class="text-sm text-gray-600">协议时间</span>
                <span class="text-sm text-gray-800">2024-01-17 10:00</span>
            </div>
            <div class="mt-3 text-right">
                <span class="bg-[#eef2ff] text-[#6366f1] text-xs px-2 py-1 rounded">待签署</span>
            </div>
        </div>

        <!-- 协议文档 -->
        <div class="bg-white rounded-lg mx-4 mt-4 p-4 shadow-sm">
            <h2 class="text-lg font-bold text-gray-800 mb-4">协议文档</h2>
            <div class="border border-gray-200 rounded-lg p-4">
                <div class="flex items-center space-x-4">
                    <div class="w-12 h-12 bg-red-100 rounded-lg flex items-center justify-center flex-shrink-0">
                        <i class="fas fa-file-pdf text-red-500 text-xl"></i>
                    </div>
                    <div class="flex-1 min-w-0">
                        <div class="text-sm font-medium text-gray-800">服务协议.pdf</div>
                        <div class="text-xs text-gray-400 mt-1">2.5 MB</div>
                    </div>
                    <button class="bg-[#6366f1] text-white px-4 py-2 rounded-lg text-sm">
                        <i class="fas fa-eye mr-1"></i>预览
                    </button>
                </div>
            </div>
        </div>

        <!-- 协议摘要 -->
        <div class="bg-white rounded-lg mx-4 mt-4 p-4 shadow-sm">
            <h2 class="text-lg font-bold text-gray-800 mb-4">协议摘要</h2>
            <div class="space-y-3">
                <div class="flex justify-between items-center py-2 border-b border-gray-200 last:border-0">
                    <span class="text-sm text-gray-600">服务内容</span>
                    <span class="text-sm text-gray-800 font-medium">系统功能优化</span>
                </div>
                <div class="flex justify-between items-center py-2 border-b border-gray-200 last:border-0">
                    <span class="text-sm text-gray-600">服务价格</span>
                    <span class="text-sm font-bold text-[#6366f1]">¥15,000</span>
                </div>
                <div class="flex justify-between items-center py-2">
                    <span class="text-sm text-gray-600">服务期限</span>
                    <span class="text-sm text-gray-800 font-medium">2周</span>
                </div>
            </div>
        </div>
    </div>

    <!-- 底部操作按钮 -->
    <div class="fixed bottom-0 left-0 right-0 bg-white border-t border-gray-200 p-4" style="max-width: 414px; margin: 0 auto;">
        <div class="space-y-3">
            <button class="w-full bg-[#6366f1] text-white py-3 rounded-lg font-medium">查看协议</button>
            <div class="grid grid-cols-2 gap-3">
                <button class="bg-gray-100 text-gray-700 py-3 rounded-lg font-medium">拒绝协议</button>
                <button class="bg-[#6366f1] text-white py-3 rounded-lg font-medium" onclick="alert('即将跳转到腾讯签进行协议签署');">
                    确认签署
                </button>
            </div>
        </div>
    </div>
</body>
</html>
